<!--
 * @Author: Mr · Lei
 * @Date: 2024-10-18 17:09:49
 * @LastEditors: OBKoro1
 * @LastEditTime: 2024-10-18 17:09:49
 * @FilePath: \ruituan-tuan-web\src\views\nfc\nfc-config\components\adduser.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by 四川开局红科技有限公司, All Rights Reserved. 
-->
<template>
  <div>
    <a-modal
      :visible="props.modalObj.isVisible"
      width="70vw"
      unmount-on-close
      :footer="false"
      @open="openModal"
      @cancel="handleCancel"
    >
      <template #title>
        {{ $t('nfcOrderList.modal.title.user.add') }}
      </template>
      <a-form ref="formRef" layout="vertical" :model="userConfigFormData">
        <a-row>
          <a-col :span="8">
            <a-form-item
              field="rate"
              :label="$t('nfcOrderList.modal.rate')"
              :style="{ width: '350px' }"
            >
              <a-input
                v-model="userConfigFormData.rate"
                :placeholder="$t('nfcOrderList.modal.rate.placeholder')"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="16">
            <a-row>
              <a-col :span="11">
                <a-descriptions
                  v-if="storeData.length > 0"
                  :data="storeData"
                  size="mini"
                  :title="$t('nfcOrderList.modal.tabel.title3')"
                  bordered
                />
              </a-col>
              <a-col :span="2"></a-col>
              <a-col :span="11">
                <a-descriptions
                  v-if="customeData.length > 0"
                  :data="customeData"
                  size="mini"
                  :title="$t('nfcOrderList.modal.tabel.title4')"
                  bordered
                />
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row :gutter="[0, 16]">
          <a-col :span="11">
            <div style="margin-top: 20px"></div>

            {{ $t('nfcOrderList.modal.tabel.title') }}
            <a-divider style="margin-top: 5px" />
            <a-row>
              <a-col :span="10">
                <a-form-item :label="t('nfcOrderList.modal.shop.name')">
                  <a-space size="large">
                    <a-input
                      v-model="formModel.name"
                      :placeholder="t('nfcOrderList.modal.shop.name')"
                    />
                  </a-space>
                </a-form-item>
              </a-col>
              <a-col :span="9">
                <a-form-item :label="t('nfcOrderList.modal.shop.address')">
                  <a-space size="large" align="end">
                    <a-input
                      v-model="formModel.address"
                      :placeholder="t('nfcOrderList.modal.shop.address')"
                    />
                  </a-space>
                </a-form-item>
              </a-col>
              <a-divider style="height: 84px" direction="vertical" />
              <a-col :flex="'86px'" style="text-align: right" :span="4">
                <a-space direction="vertical" :size="18">
                  <a-button type="primary" size="small" @click="search">
                    <template #icon>
                      <icon-search />
                    </template>
                    {{ $t('nfcOrderList.form.search') }}
                  </a-button>
                  <a-button size="small" @click="reset">
                    <template #icon>
                      <icon-refresh />
                    </template>
                    {{ $t('nfcOrderList.form.reset') }}
                  </a-button>
                </a-space>
              </a-col>
            </a-row>
            <a-divider style="margin-top: 10px" />

            <a-table
              row-key="id"
              show-empty-tree
              :row-selection="{ type: 'radio' }"
              :loading="loading"
              :pagination="pagination"
              :columns="(columns as TableColumnData[])"
              :data="renderData"
              :bordered="{ wrapper: true, cell: true }"
              @page-change="onPageChange"
              @select="onSelectChange"
            >
              <template #name="{ record }">
                <span :style="{ color: record.name ? '' : '#999999' }">{{
                  record.name || $t('nfcOrderList.modal.shop.name1')
                }}</span>
              </template>
              <template #address="{ record }">
                <span :style="{ color: record.address ? '' : '#999999' }">{{
                  record.address || $t('nfcOrderList.modal.shop.address1')
                }}</span>
              </template>
            </a-table>
          </a-col>
          <a-col :span="1"> </a-col>
          <a-col :span="11">
            <div style="margin-top: 20px"></div>

            {{ t('nfcOrderList.modal.tabel.title2') }}
            <a-divider style="margin-top: 5px" />
            <a-row>
              <a-col :span="10">
                <a-form-item :label="t('nfcOrderList.modal.shop.nickname')">
                  <a-space size="large">
                    <a-input
                      v-model="formModelCustom.nickname"
                      :placeholder="t('nfcOrderList.modal.shop.nickname')"
                    />
                  </a-space>
                </a-form-item>
              </a-col>
              <a-col :span="9">
                <a-form-item :label="t('nfcOrderList.modal.shop.mobile')">
                  <a-space size="large" align="end">
                    <a-input
                      v-model="formModelCustom.mobile"
                      :placeholder="t('nfcOrderList.modal.shop.mobile')"
                    />
                  </a-space>
                </a-form-item>
              </a-col>
              <a-divider style="height: 84px" direction="vertical" />
              <a-col :flex="'86px'" style="text-align: right" :span="4">
                <a-space direction="vertical" :size="18">
                  <a-button type="primary" size="small" @click="searchCustom">
                    <template #icon>
                      <icon-search />
                    </template>
                    {{ $t('nfcOrderList.form.search') }}
                  </a-button>
                  <a-button size="small" @click="resetCustom">
                    <template #icon>
                      <icon-refresh />
                    </template>
                    {{ $t('nfcOrderList.form.reset') }}
                  </a-button>
                </a-space>
              </a-col>
            </a-row>
            <a-divider style="margin-top: 10px" />
            <a-table
              row-key="id"
              show-empty-tree
              :row-selection="{ type: 'radio' }"
              :loading="loading"
              :pagination="paginationCustom"
              :columns="(ColumnsCustom as TableColumnData[])"
              :data="renderDataCustome"
              :bordered="{ wrapper: true, cell: true }"
              @page-change="onPageChangeCustom"
              @select="onSelectChangeCustom"
            >
              <template #nickname="{ record }">
                <span :style="{ color: record.nickname ? '' : '#999999' }">{{
                  record.nickname || $t('nfcOrderList.modal.shop.nickname1')
                }}</span>
              </template>
              <template #mobile="{ record }">
                <span :style="{ color: record.mobile ? '' : '#999999' }">{{
                  record.mobile || $t('nfcOrderList.modal.shop.mobile1')
                }}</span>
              </template>
            </a-table>
          </a-col>
        </a-row>
        <a-form-item>
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              margin-top: 20px;
            "
          >
            <a-button type="outline" size="large" @click="handleCancel">
              {{ $t('nfcOrderList.modal.cancel') }}
            </a-button>
            <div style="width: 30px"></div>
            <a-button
              type="primary"
              size="large"
              html-type="submit"
              @click="handlePasswordOk"
            >
              {{ $t('nfcOrderList.modal.confirm') }}
            </a-button>
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, defineProps, defineEmits, reactive, computed } from 'vue';
  import { GetShopListApi, PolicyParams } from '@/api/shop';

  import { Pagination } from '@/types/global';
  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import useLoading from '@/hooks/loading';
  import { AddUserConfigApi, EditUserConfigApi } from '@/api/nfc';
  import { Message } from '@arco-design/web-vue';
  import { useI18n } from 'vue-i18n';

  const { t } = useI18n();
  const { loading, setLoading } = useLoading(true);
  const props = defineProps({
    modalObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });

  // 表单数据
  const userConfigFormData = ref<any>({
    user_id: 0,
    shop_id: 0,
    rate: '',
    id: 0,
  });
  const emits = defineEmits(['handleCancel']);

  const handlePasswordOk = async () => {
    setLoading(true);
    try {
      if (userConfigFormData.value.rate === '') {
        Message.error(t('nfcOrderList.modal.rate.placeholder'));
        return;
      }
      if (userConfigFormData.value.shop_id === 0) {
        Message.error(t('nfcOrderList.modal.shopid.empty'));
        return;
      }
      if (userConfigFormData.value.user_id === 0) {
        Message.error(t('nfcOrderList.modal.userid.empty'));
        return;
      }
      if (props.modalObj.type === 0) {
        await AddUserConfigApi(userConfigFormData.value);
        Message.success(t('Message.addSuccess'));
      } else {
        await EditUserConfigApi(userConfigFormData.value);
        Message.success(t('Message.editSuccess'));
      }
      emits('handleCancel');
    } catch (err) {
      console.log('err::: ', err);
    } finally {
      setLoading(false);
    }
  };
  // 查询门店
  // 获取门店 列表
  const renderData = ref([]);
  // 分页属性
  const basePagination: Pagination = {
    page: 1,
    limit: 5,
  };
  const pagination = reactive({
    ...basePagination,
    defaultPageSize: 5,
    current: 1,
  });
  // 分页属性
  const basePaginationCustom: Pagination = {
    page: 1,
    limit: 5,
  };
  const paginationCustom = reactive({
    ...basePaginationCustom,
    defaultPageSize: 5,
    current: 1,
  });
  const generateFormModel = () => {
    return {
      name: '',
      address: '',
    };
  };
  const generateFormModelOp = () => {
    return {
      name: 'like',
      address: 'like',
    };
  };
  const generateFormModelCustom = () => {
    return {
      nickname: '',
      mobile: '',
    };
  };
  const generateFormModelOpCustom = () => {
    return {
      nickname: 'like',
      mobile: 'like',
    };
  };
  const formModel = ref(generateFormModel());
  const formModelOp = ref(generateFormModelOp());

  const formModelCustom = ref(generateFormModelCustom());
  const formModelOpCustom = ref(generateFormModelOpCustom());

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const columns = computed<TableColumnData[]>(() => [
    {
      title: t('nfcOrderList.modal.shop.name'),
      dataIndex: 'name',
      align: 'center',
      slotName: 'name',
    },
    {
      title: t('nfcOrderList.modal.shop.address'),
      dataIndex: 'address',
      align: 'center',
      slotName: 'address',

      width: 300,
    },
  ]);
  const renderDataCustome = ref([]);
  const ColumnsCustom = computed<TableColumnData[]>(() => [
    {
      title: t('nfcOrderList.modal.shop.nickname'),
      dataIndex: 'nickname',
      slotName: 'nickname',
      align: 'center',
    },
    {
      title: t('nfcOrderList.modal.shop.mobile'),
      dataIndex: 'mobile',
      align: 'center',
      slotName: 'mobile',
      width: 300,
    },
  ]);
  // 查询门店
  const feachdata = async (params: PolicyParams = { page: 1, limit: 5 }) => {
    setLoading(true);
    try {
      const { data } = await GetShopListApi(params);
      renderData.value = data.data;
      pagination.page = params.page;
      pagination.total = data.total;
    } catch (err) {
      console.log(err);
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };

  const search = () => {
    feachdata({
      ...basePagination,
      filter: JSON.stringify(formModel.value),
      op: JSON.stringify(formModelOp.value),
    } as unknown as PolicyParams);
  };
  const onPageChange = (page: number) => {
    pagination.current = page;
    feachdata({
      ...basePagination,
      page,
      filter: JSON.stringify(formModel.value),
      op: JSON.stringify(formModelOp.value),
    } as unknown as PolicyParams);
  };

  const reset = () => {
    formModel.value = generateFormModel();
    basePagination.page = 1;
    search();
  };
  const storeData = ref([]);

  // 选择门店后触发
  const onSelectChange = (keys: (string | number)[]) => {
    console.log('keys::: ', keys);
    const id = keys[0];
    userConfigFormData.value.shop_id = id;
    const obj = renderData.value.find((item: any) => {
      return item.id === id;
    });
    console.log('obj::: ', obj);
    storeData.value = [
      {
        label: t('nfcOrderList.modal.shop.name'),
        value: obj.name,
      },
      {
        label: t('nfcOrderList.modal.shop.address'),
        value: obj.address,
      },
    ];
  };
  // //////////////////////////////////////////////////////
  // 选择用户后触发
  const customeData = ref([]);
  const onSelectChangeCustom = (keys: (string | number)[]) => {
    console.log('keys::: ', keys);
    const id = keys[0];
    userConfigFormData.value.user_id = id;
    const obj = renderDataCustome.value.find((item: any) => {
      return item.id === id;
    });
    customeData.value = [
      {
        label: t('nfcOrderList.modal.shop.nickname'),
        value: obj.nickname,
      },
      {
        label: t('nfcOrderList.modal.shop.mobile'),
        value: obj.mobile,
      },
    ];
  };
  // 查询客户
  const getCoustom = async (params: PolicyParams = { page: 1, limit: 5 }) => {
    setLoading(true);
    try {
      // const { data } = await queryPolicyList(params);
      // renderDataCustome.value = data.data;
      // paginationCustom.page = params.page;
      // paginationCustom.total = data.total;
    } catch (err) {
      console.log(err);
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  const searchCustom = () => {
    getCoustom({
      ...basePaginationCustom,
      filter: JSON.stringify(formModelCustom.value),
      op: JSON.stringify(formModelOpCustom.value),
    } as unknown as PolicyParams);
  };
  const onPageChangeCustom = (page: number) => {
    pagination.current = page;
    getCoustom({
      ...basePaginationCustom,
      page,
      filter: JSON.stringify(formModelCustom.value),
      op: JSON.stringify(formModelCustom.value),
    } as unknown as PolicyParams);
  };

  const resetCustom = () => {
    formModelCustom.value = generateFormModelCustom();
    basePaginationCustom.page = 1;
    searchCustom();
  };
  // 弹窗打开触发
  const openModal = () => {
    if (props.modalObj.type === 1) {
      userConfigFormData.value.id = props.modalObj.obj.id;
      userConfigFormData.value.user_id = props.modalObj.obj.user_id;
      userConfigFormData.value.shop_id = props.modalObj.obj.shop_id;
      userConfigFormData.value.rate = props.modalObj.obj.rate;
      formModel.value.name = props.modalObj.obj.shop.name;
      formModelCustom.value.nickname = props.modalObj.obj.user.nickname;
    }
    search();
    searchCustom();
  };
  // 弹窗关闭触发
  const handleCancel = () => {
    storeData.value = [];
    customeData.value = [];
    formModel.value = generateFormModel();
    formModelCustom.value = generateFormModelCustom();
    emits('handleCancel');
  };
</script>

<style scoped></style>
